<template>
  <div class="home">
    <h1>商品列表</h1>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-alert
      title="注意：只允许为第三级分类设置相关参数!"
      show-icon
      type="warning"
      :closable="false"
      effect="dark"
      class="qqq"
    >
    </el-alert>
    <!-- 三级联动 -->
    <el-row class="mx16">
      <el-col
        :span="4"
        style="
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        >选择商品分类：</el-col
      >
      <el-col :span="20" class="www">
        <el-cascader
          v-model="value"
          :options="options"
          :props="PropsPara"
          @change="handleChange"
        ></el-cascader>
      </el-col>
    </el-row>

    <!-- 列表渲染 -->
    <el-tabs
      type="border-card"
      class="mx16"
      @tab-click="ParaTabDJ"
      v-model="ParaTab"
    >
      <el-tab-pane label="动态参数" name="many">
        <el-button type="primary" size="mini" :disabled="falg" @click="DjCate"
          >添加参数</el-button
        >

        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="index"
          border
          :tree-props="PropsParaTab"
          class="mx16"
        >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div>
                <el-tag
                  class="mm16 mx16"
                  :key="index + 1"
                  v-for="(item, index) in scope.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(index, scope.row)"
                >
                  {{ item }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag mm16 mx16"
                  size="small"
                  @click="showInput"
                  >+ New Tag</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="attr_name" label="参数名称"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="ParaBjok(scope.row)"
                icon="el-icon-edit"
                size="mini"
                >修改</el-button
              >
              <el-button
                type="danger"
                @click="ParaRom(scope.row)"
                icon="el-icon-delete"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="only">
        <el-button type="primary" size="mini" :disabled="falg" @click="DjCateJt"
          >添加参数</el-button
        >
        <el-table
          :data="tableDataJt"
          style="width: 100%; margin-bottom: 20px"
          row-key="index"
          border
          :tree-props="PropsParaTabJt"
          class="mx16"
        >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div>
                <el-tag
                  class="mm16 mx16"
                  :key="index + 1"
                  v-for="(item, index) in scope.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleCloseJt(index, scope.row)"
                >
                  {{ item }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisibleJt"
                  v-model="inputValueJt"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirmJt(scope.row)"
                  @blur="handleInputConfirmJt(scope.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag mm16 mx16"
                  size="small"
                  @click="showInputJt"
                  >+ New Tag</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="attr_name" label="参数名称"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="ParaBjokJt(scope.row)"
                icon="el-icon-edit"
                size="mini"
                >修改</el-button
              >
              <el-button
                type="danger"
                @click="ParaRomJt(scope.row)"
                icon="el-icon-delete"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 弹出框 -->
    <el-dialog
      :title="falJt ? '添加属性' : '改变静态属性'"
      :visible.sync="dialogVisibleJt"
      width="50%"
    >
      <el-form :model="formJt">
        <el-form-item label="活动名称" label-width="120">
          <el-input v-model="formJt.attr_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleJt = false">取 消</el-button>
        <el-button type="primary" v-if="fal" @click="ParaAQdJt"
          >确 定</el-button
        >
        <el-button type="primary" v-else @click="ParaQdOkJt">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog
      :title="form == '' ? '添加属性' : '改变动态属性'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="120">
          <el-input v-model="form.attr_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" v-if="fal" @click="ParaQdJtasd"
          >确 定</el-button
        >
        <el-button type="primary" v-else @click="ParaQd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getcategorieasattributes,
  PutCateRiesApi,
  DeleteCateApi,
  getcategories,
  PostCateRiesApi,
  POSTCateGoApi,
  GetGoodsCatApi,
} from "@/Api";
export default {
  data() {
    return {
      // 静态弹出框
      formJt: {
        attr_name: "",
      },
      // 弹出框显示隐藏
      dialogVisibleJt: false,
      // 静态弹出框
      falJt: false,
      // 静态
      inputVisibleJt: false,
      inputValue: "",
      // 静态配置
      PropsParaTabJt: {
        children: "children",
        hasChildren: "hasChildren",
      },
      //静态参数
      tableDataJt: [],
      // 弹出框数据
      form: {
        attr_name: "",
      },
      // 显示是哪个弹出框
      fal: true,
      // 弹出框显示隐藏
      dialogVisible: false,
      // tagif判断
      inputVisible: false,
      // tag数据绑定
      inputValue: "",
      // 三级联动id数据
      value: [],
      // 三级联动数据源
      options: [],
      // 三级联动属性配置
      PropsPara: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      //   标签页初始值
      ParaTab: "many",
      //   渲染tab配置
      PropsParaTab: {
        children: "children",
        hasChildren: "hasChildren",
      },
      //   tab列表渲染
      tableData: [],
      // 属性id
      att_id: 0,
    };
  },
  mounted() {
    this.ParaQdJt();
    this.GetPara();
  },

  methods: {
    // async getcategories(){
    //     let res=await getcategories()
    //
    //     this.value=res.data
    // },

    // 静态确定添加tag
    async ParaQdJt() {
      let id = this.value[this.value.length - 1];
      // console.log(id);
    

      // console.log(this.att_id);
      // console.log(this.form.attr_name);
      // console.log(this.ParaTab);
      let res = await getcategorieasattributes(id, this.att_id, {
        attr_name: this.formJt.attr_name,
        attr_sel: this.ParaTab,
      });
      this.GetCate();
      this.dialogVisible = false;
    },
// 动态添加
 async ParaQdJtasd(){

console.log("ParaQdJtasd");
    let rew = await PostCateRiesApi(this.value[this.value.length - 1], {
        attr_name: this.form.attr_name,
        attr_sel: this.ParaTab,
      });
       if (rew.meta.status === 201) {
        this.$message({
          message: rew.meta.msg,
          type: "success",
        });
        this.GetCate();
        this.dialogVisible = false;
      } else {
        this.$message({
          message: rew.meta.msg,
          type: "error",
        });
      }
    
 },
 async ParaAQdJt(){

console.log("ParaAQdJt");
    let rew = await PostCateRiesApi(this.value[this.value.length - 1], {
        attr_name: this.formJt.attr_name,
        attr_sel: this.ParaTab,
      });

       if (rew.meta.status === 201) {
        this.$message({
          message: rew.meta.msg,
          type: "success",
        });
        this.GetCate();
        this.dialogVisibleJt = false;
      } else {
        this.$message({
          message: rew.meta.msg,
          type: "error",
        });
      }
    
 },
    // 动态编辑
    async ParaQd() {
      let id = this.value[this.value.length - 1];
      // console.log("ParaQd");
      let res = await PutCateRiesApi(id, this.att_id, {
        attr_name: this.form.attr_name,
        attr_sel: this.ParaTab,
      });

      if (res.meta.status === 200) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
        this.GetCate();
        this.dialogVisible = false;
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
    // 静态编辑
    async ParaQdOkJt() {
      let id = this.value[this.value.length - 1];
      console.log("ParaQdOkJt");
      let res = await PutCateRiesApi(id, this.att_id, {
        attr_name: this.formJt.attr_name,
        attr_sel: this.ParaTab,
      });

      if (res.meta.status === 200) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
        this.GetCate();
        this.dialogVisibleJt = false;
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },

    // 静态删除
    async ParaRomJt(row) {
      //  console.log(row,'静态删除');
      let res = await DeleteCateApi(row.cat_id, row.attr_id);
      this.GetCate();
      if (res.meta.status === 200) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
    // 静态编辑
    ParaBjokJt(row) {
      // console.log(row, "静态编辑");
      this.fal = false;
      // console.log(this.fal);
      this.att_id = row.attr_id;
      this.dialogVisibleJt = true;
      this.falJt.attr_name = row.attr_name;
    },
    // 点击动态弹出框
    ParaBjok(row) {
      // console.log(row);
      this.fal = false;
      // console.log("改变动态属性");
      // console.log(this.fal);
      this.att_id = row.attr_id;
      this.dialogVisible = true;
      this.form.attr_name = row.attr_name;
    },
    // 静态tag添加
    handleInputConfirmJt() {},
    // 静态出现input
    showInputJt() {},
    // 静态tag关闭
    handleCloseJt() {},
    // 静态属性确定
    DjCateJt() {
      this.fal = true;

      this.dialogVisibleJt = true;
    },
    // 动态属性确定
   DjCate() {
      this.fal = true;

      this.dialogVisible = true;
    },
    // 删除
    async ParaRom(row) {
      let res = await DeleteCateApi(row.cat_id, row.attr_id);
      this.GetCate();
      if (res.meta.status === 200) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
    // 确定添加
    async ParaQdOk() {
      let rew = await PostCateRiesApi(this.value[this.value.length - 1], {
        attr_name: this.form.attr_name,
        attr_sel: this.ParaTab,
      });
      this.dialogVisible = false;
      this.GetCate();
    },
    // 点击出现添加输入框
    DjCate() {
      this.fal = true;
      this.dialogVisible = true;
    },
    // 点击button显示input
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 回车或失焦触发
    async handleInputConfirm(row) {
      if (this.inputValue.length > 0) {
        row.attr_vals.push(this.inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
      let res = await PutCateRiesApi(row.cat_id, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.ParaTab,
        attr_vals: row.attr_vals.join(","),
      });
    },
    // 关闭触发
    async handleClose(i, row) {
      row.attr_vals.splice(i, 1);
      let res = await PutCateRiesApi(row.cat_id, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.ParaTab,
        attr_vals: row.attr_vals.join(","),
      });
    },

    //   点击tab切换
    ParaTabDJ(e) {
      // console.log(e._props.name);
      // console.log(this.ParaTab);
      this.GetCate();
    },
    //   三级分类变化时
    handleChange(e) {
      //   console.log(e);
      this.GetCate();
    },
    // 初始化页面
    async GetPara() {
      let res = await GetGoodsCatApi();
      // console.log(res);
      this.options = res.data;
    },
    async GetCate() {
      if (this.value.length !== 3) {
        this.$message({
          message: "只允许为三级分类设置参数！",
          type: "warning",
        });
        this.tableData = [];
        return;
      }
      //  console.log(this.value);
      let id = this.value[this.value.length - 1];
      // console.log(id);
      // console.log(this.ParaTab);

      let res = await POSTCateGoApi(id, this.ParaTab);
      // console.log(res);
      res.data.forEach((item) => {
        (item.inputValue = ""), (item.inputVisible = false);
      });
      if (this.ParaTab === "many") {
        res.data.forEach((item) => {
          item.attr_vals =
            item.attr_vals.length > 0 ? item.attr_vals.split(",") : [];
        });
        this.tableData = res.data;
      } else {
        res.data.forEach((item) => {
          item.attr_vals =
            item.attr_vals.length > 0 ? item.attr_vals.split(",") : [];
        });
        this.tableDataJt = res.data;
      }
    },
  },
  components: {},
  computed: {
    falg() {
      if (this.value.length !== 3) {
        return true;
      }
      return false;
    },
  },
};
</script>

<style lang='scss' scoped>
h1 {
  color: #fff;
}
.c {
  background-color: #34429a;
  margin-top: 10px;
}
.input-with-select {
  width: 30%;
}
.top {
  display: flex;
  margin-bottom: 15px;
}
.btn {
  margin-left: 10px;
}
.home {
  width: 100%;
  background: #fff;
}
.qqq{
  margin-top: 20px;
  margin-bottom: 10px;
}
.www{
  margin-left: -460px;
  margin-bottom: 20px;
}
</style>
